<template>
  <div class="all">
    <div class="leftall">
      <div class="leftA">
        <Lefttop/>
        <div class="leftdown">
          <Leftdown />
        </div>
      </div>
      <div class="fenleicenter">
        <router-view></router-view>
      </div>
    </div>

    <div class="fenleiright">
      <Popcaidan/>
    </div>
  </div>
</template>

<script>
import Leftdown from "./leftdown.vue";
import Popcaidan from './popcaidan.vue'
import Lefttop from './lefttop.vue'
export default {
  data() {
    return {
    };
  },
  components: {
    Leftdown,
    Popcaidan,
    Lefttop
  },
};
</script>

<style  scoped>
.all {
  display: flex;
  width: 1000px;
  height: 2000px;
}
.leftall {
  /* margin-left: 20px; */
  height: 2000px;
  width: 66.667%;
  display: flex;
}
.LeftA {
  height: 800px;
  width: 25%;
}
.leftdown {
  height: 300px;
  margin-top: 100px;
}

.fenleicenter {
  margin: 0 auto;
  height: 2000px;
  width: 75%;
  /* overflow: hidden; */
}

.fenleiright {
  width: 33.3333%;
  height: 2000px;
  /* background-color: blueviolet; */
}
</style>